<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <style>
        .rw-table {
            margin-top: 20px;
        }

        .rw-table-title {
            height: 32px;
            text-align: center;
            line-height: 32px;
            background-color: #ccc;
        }

        .rw-table-box {
            display: flex;
            margin-bottom: 0;
        }

        .rw-table-box.align-right {
            justify-content: flex-end;
        }

        .rw-table-box>.box-item {
            width: calc(100% / 7);
            height: 32px;
            text-align: center;
            line-height: 32px;
        }
    </style>
</head>

<body>

    <div class="container">
        <div class="row" id="calendarBox">
            <div class="col-md-3 col-sm-6">
                <div class="rw-table">
                    <div class="rw-table-title">2020年4月</div>
                    <ul class="list-unstyled rw-table-box">
                        <li class="box-item">日</li>
                        <li class="box-item">一</li>
                        <li class="box-item">二</li>
                        <li class="box-item">三</li>
                        <li class="box-item">四</li>
                        <li class="box-item">五</li>
                        <li class="box-item">六</li>
                    </ul>
                    <ul class="list-unstyled rw-table-box">
                        <li class="box-item">1</li>
                        <li class="box-item">2</li>
                        <li class="box-item">3</li>
                        <li class="box-item">4</li>
                        <li class="box-item">5</li>
                        <li class="box-item">6</li>
                        <li class="box-item">7</li>
                    </ul>
                    <ul class="list-unstyled rw-table-box">
                        <li class="box-item">8</li>
                        <li class="box-item">9</li>
                        <li class="box-item">10</li>
                        <li class="box-item">11</li>
                        <li class="box-item">12</li>
                        <li class="box-item">13</li>
                        <li class="box-item">14</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>


    <script src="./js/jquery.slim.min.js"></script>
    <script src="./js/bootstrap.bundle.min.js"></script>

    <script>





        // 定义年历生成函数
        function calendar(year) {

            if (isNaN(year)) {
                alert('请输入一个正确的年份');
                return;
            }

            // 获取指定年份1月1日的星期数值
            var week = new Date(year, 0).getDay();

            var html = '';

            // 拼接每个月份的表格
            for (m = 1; m <= 12; ++m) {
                //表头
                html += '<div class="col-md-3 col-sm-6"><div class="rw-table">';
                html += '<div class="rw-table-title">' + year + '年' + m + '月</div>';
                html += '<ul class="list-unstyled rw-table-box"><li class="box-item">日</li><li class="box-item">一</li><li class="box-item">二</li><li class="box-item">三</li><li class="box-item">四</li><li class="box-item">五</li><li class="box-item">六</li></ul>';


                // 获取月份m共有多少天
                var maxDays = new Date(year, m, 0).getDate();

                html += '<ul class="list-unstyled rw-table-box">';           // 开始<ul>标签
                for (d = 1; d <= maxDays; d++) {

                    if (week != 0 && d == 1) {                // 如果该月的第1天不是星期日，则填充空白
                        for (var i = 1; i <= week; i++) {
                            html += '<li class="box-item"></li>';
                        }
                    }
                    html += '<li class="box-item">' + d + '</li>';
                    if (week == 6 && d != maxDays) {           // 如果星期六不是该月的最后一天，则换行
                        html += '</ul><ul class="list-unstyled rw-table-box">';
                    } else if (week == maxDays) {                   // 该月的最后一天，闭合<tr>标签
                        html += '</ul>';
                    }
                    week = (week + 1 > 6) ? 0 : week + 1;
                }
                html += '</div></div>';
            }
            return html;
        }
        var calendarBox = document.getElementById('calendarBox');
        var year = parseInt(prompt('输入年份：', '2022'));
        calendarBox.innerHTML = calendar(year);//调用函数,生成指定年份的年历

    </script>
</body>

</html>